<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'user_add.jsp' starting page</title>
    
    <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="js/themes/icon.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/locale/easyui-lang-zh_CN.js"></script>
    
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
		var flag;
		$(function(){
			 $.extend($.fn.validatebox.defaults.rules, {   	
			      minLength: {   	
			          validator: function(value, param){   	
			              return value.length >= param[0];   	
			          },   	
			          message: ''  	
			      }  
			  });
			 
			$('#tree').tree({   
				url:'json/client_list.action' ,
				onContextMenu: function(e, node){
					e.preventDefault();						//屏蔽掉当前网页的右键，才能显示
					$('#tree').tree('select', node.target);
					$('#menu').menu('show', {
						left: e.pageX,
						top: e.pageY
					});
				}
			});
			
			$('#save').click(function(){
				var node = $('#tree').tree('getSelected');  //当前选中的元素
				if(flag == 'append'){													
					$('#tree').tree('append',{				
						parent:node.target,					//当前选种元素的DOM对象
						data:[{								//添加一条记录，但数据库没有（前台显示）
							text:$('#myform').find('input[name="client.name"]').val(),
							attributes:{
								address:$('#myform').find('input[name="client.address"]').val(),
								bankAccount:$('myform').find('input[name="client.bankAcount"]').val(),
								tel:$('#myform').find('input[name="client.tel"]').val(),
								isClient:$('#myform').find('input[name="client.isClient"]').val(),
								zipCode:$('#myform').find('input[name="client.zipCode"]').val()							
							}
						}]					
					});
	
					$.ajax({					
						url:'json/client_add.action',
						cache:false,
						data:{
							"client.parentClient.id":node.id,
							"client.name":$('#myform').find('input[name="client.name"]').val(),
							"client.address":$('#myform').find('input[name="client.address"]').val(),
							"client.bankAccount":$('#myform').find('input[name="client.bankAccount"]').val(),
							"client.tel":$('#myform').find('input[name="client.tel"]').val(),
							"client.isClient":$('#myform').find('input[name="client.isClient"]').val(),
							"client.zipCode":$('#myform').find('input[name="client.zipCode"]').val()					
						},
						dataType:'json',
						suceess:function(result){
							//本来是不用刷心的，但是下一次修改的时候就得不到该节点id
							var parent = $('#tree').tree('getParent',node.target);
							$('#tree').tree('reload',parent.target);
							$.messager.show({
								title:'提示',
								msg:'操作成功'
							});						
						}						
					});	
					
					$('#dialog').dialog('close');
					
				} else {
					$.ajax({
						url:'json/client_modify.action',
						cache:false,
						data:{
							"client.id":$('#myform').find('input[name="client.id"]').val(),
							"client.name":$('#myform').find('input[name="client.name"]').val(),
							"client.bankAccount":$('#myform').find('input[name="client.bankAccount"]').val(),
							"client.address":$('#myform').find('input[name="client.address"]').val(),
							"client.tel":$('#myform').find('input[name="client.tel"]').val(),
							"client.isClient":$('#myform').find('input[name="client.isClient"]').val(),
							"client.zipCode":$('#myform').find('input[name="client.zipCode"]').val()
						},
						dataType:'json',
						success:function(result){
							var parent = $('#tree').tree('getParent',node.target);
							$('#tree').tree('reload',parent.target);
							$.messager.show({
								title:'提示',
								msg:'操作成功'
							});
						}					
					});
					$('#dialog').dialog('close');
					
				}
				
			});
			
			$('#canel').click(function(){
				$('#dialog').dialog('close');
			});
		});
		
		function append(){
			flag = 'append';
			$('#myform').get(0).reset;
			$('#dialog').dialog('open');
		}
		
		function edit(){			 
			flag = 'edit';
			$('#myform').get(0).reset;
			$('#dialog').dialog('open');
			var node = $('#tree').tree('getSelected');
			$('#myform').form('load',{
				"client.id":node.id,
				"client.name":node.text,
				"client.isClient":node.attributes.isClient,
				"client.tel":node.attributes.tel,
				"client.address":node.attributes.address,
				"client.bankAccount":node.attributes.bankAccount,
				"client.zipCode":node.attributes.zipCode,
			});
			$('#dialog').dialog('open');
		}
		
		function removeNode(){
			var node = $('#tree').tree('getSelected');
			$.messager.confirm('确认','确认删除吗？',function(r){
				if(r){
					$('#tree').tree('remove',node.target);
					$.post('json/client_delete.action',{id:node.id},function(result){
						$.messager.show({
							title:'提示',
							msg:'操作成功'
						});
					});	 	
				}
			});					
		}
		//如果是供销商，则可以继续往下填
		function editable(){
			$('#bankAccount').attr('disabled',false);
			$('#tel').attr('disabled',false);
			$('#address').attr('disabled',false);
			$('#zipCode').attr('disabled',false);
		
		}
		//区域不能填
		function read(){
			$('#bankAccount').attr('disabled',true);
			$('#tel').attr('disabled',true);
			$('#address').attr('disabled',true);
			$('#zipCode').attr('disabled',true);
		}
		
	</script>

  </head>
  
  <body>
  	<ul id="tree"></ul>
 	
  	<div id="menu" class="easyui-menu" style="width:120px;" >
		<div onclick="append()">Append</div>
		<div onclick="edit()" >Edit</div>
		<div onclick="removeNode()">Remove</div>
	</div>
  	
  	<div id="dialog" class="easyui-dialog" title="设置分销商" draggable=false closed=true resizable=false modal=true style="width:300px;">  	     	 
			 <form id="myform" action="" method="post">
				 <input type="hidden" name="client.id" value=""/>
			  		<table>
			  			<tr>
			  				<td>类型</td>
			  				<td>
			  					 <input type="radio" name="client.isClient" value="true" checked="checked" onclick="editable()">分销商
			  					 <input type="radio" name="client.isClient" value="false" onclick="read()">区域
			  				</td>
			  			</tr>
			  			<tr>
			  				<td>分销商名</td>
			  				<td>
			  					<input id="name" type="text" name="client.name" class="easyui-validatebox" required=true 
			  						missingMessage="分销商名必填" validType="minLength[2]" invalidMessage="分销商名至少2个字符"
			  						style="width:200px;">
			  				</td>
			  			</tr>			  			
			  			<tr>
			  				<td>银行账号</td>
			  				<td>
			  					<input id="bankAccount" type="text" name="client.bankAccount" style="width:200px">
			  				</td>
			  			</tr>
			  			<tr>
			  				<td>电话</td>
			  				<td>
			  					<input id="tel" type="text" name="client.tel"  style="width:200px;" >
			  				</td>
			  			</tr>
			  			<tr>
			  				<td>地址</td>
			  				<td>
			  					<input id="address" type="text" name="client.address" style="width:200px;">
			  				</td>
			  			</tr>
			  			<tr>
			  				<td>邮政编码</td>
			  				<td>
			  					<input id="zipCode" type="text" name="client.zipCode" style="width:200px;">
			  				</td>
			  			</tr>
			  			<tr>			  			
			  				<td align="center" colspan="2">
			  					<a id="save" class="easyui-linkbutton">确定</a>
			  					<a id="canel" class="easyui-linkbutton">取消</a>
			  				</td>
			  			</tr>
			  		</table>	
			  	</form>	
		  	</div> 	
  </body>
</html>
